ㄧ.List group:切換顯示列表的內容

<div class="component" id="demo">
  <div class="container">
    <div class="row">
      <div class="col-4">
        <div class="list-group">
          <a data-toggle="list" href="#html-content" class="list-group-item list-group-item-action active">HTML</a>
          <a data-toggle="list" href="#css-content" class="list-group-item list-group-item-action">CSS</a>
          <a data-toggle="list" href="#javascript-content" class="list-group-item list-group-item-action">JavaScript</a>
        </div>
      </div>
      <div class="col-8">
        <div class="tab-content">
        <div class="tab-pane fade show active" id="html-content">hello html</div>    
        <div class="tab-pane fade" id="css-content">hello css</div>
        <div class="tab-pane fade" id="javascript-content">hello javascript</div>
       </div>
      </div>
    </div>
  </div>
</div>


.demo.component{
  padding: 50px;
}

重點：

1.我在這裡做一個佈局，col-4為列表群組、col-8為列表群組內容
2.使用a連結，去除標籤與d-flex以及對齊
4.在a連結指定 data-toggle="list"
5.列表的內容結構.tab-content為父元素，.tab-pane .fade為第二層
6.第一個列表預設加.show .active
7.這個三個列表都需要個加#html-content，#css-content，#javascript-content

8.最後的重點是要在a連結的href各加列表的id
9.然後列表第一個預設要加.active

codepen
參考：bootstrap4